let walert = (function () {


    /**
     * 最外层模板节点
     */
    this.Element = undefined

    /**
     * 创建初始化弹窗
     * @param {Object} $ 配置对象
     * @param {string} $.ele view组件id/class
     * @param {string} $.title 标题
     * @param {string} $.content 内容
     * @param {Object} $.confirm 确认按钮
     * @param {string} $.confirm.text 文本
     * @param {Function} $.confirm.click 事件
     * @param {Object} $.cancel 取消按钮
     * @param {string} $.cancel.text 文本
     * @param {Function} $.cancel.click 事件
     * @returns {Walert} Walert本对象
     */
    this.create = function ($) {
        if (!document.querySelector("div[alert]")) {
            var bodyElement = document.createElement("div")
            bodyElement.setAttribute("alert", "")

            //点击外面自动隐藏
            bodyElement.addEventListener('click', e => { e.target == bodyElement ? e.target.style.display = "none" : undefined })

            document.body.appendChild(bodyElement)
            var alertEle = document.createElement("div")
            alertEle.setAttribute("alert_", "")
            bodyElement.appendChild(alertEle)

            // console.log(typeof $.ele);
            if (typeof $.ele != 'undefined') {
                const viewEle = document.querySelector($.ele)
                alertEle.appendChild(viewEle)
            } else {

                //标题
                const titleEle = document.createElement("span")
                titleEle.setAttribute("class", "--title")
                titleEle.innerText = $.title
                alertEle.appendChild(titleEle)

                alertEle.appendChild(document.createElement("br"))

                //内容
                const contentEle = document.createElement("span")
                contentEle.setAttribute("class", "--content")
                contentEle.innerText = $.content
                alertEle.appendChild(contentEle)

                //交互区
                const BottomEle = document.createElement("div")
                BottomEle.setAttribute("class", "--button")
                alertEle.appendChild(BottomEle)

                //确定按钮
                const confirmEle = document.createElement("button")
                confirmEle.setAttribute("class", "m3-bt")
                confirmEle.innerText = $.confirm.text
                BottomEle.appendChild(confirmEle)
                confirmEle.addEventListener("click", function () {
                    $.confirm.click(this)
                })

                //取消按钮
                const cancelEle = document.createElement("button")
                cancelEle.setAttribute("class", "m3-bt text")
                cancelEle.innerText = $.cancel.text
                BottomEle.appendChild(cancelEle)
                cancelEle.addEventListener("click", function () {
                    $.cancel.click(this)
                })

                //添加到body
                document.body.appendChild(bodyElement)
            }

            this.Element = document.querySelector("div[alert]")
            bodyElement.style.display = "none"
        }
        return this
    }
    /**
     * 显示弹窗
     * @returns Walert对象
     */
    this.show = function () {
        this.Element.style.display = "flex"
    }
    /**
     * 隐藏弹窗
     * @returns Walert对象
     */
    this.cancel = function () {
        this.Element.style.display = "none"
    }
    return this
})

//修改Table原型链
/**
 * 初始化表格数据
 * @param {Object} $ 数据模板
 * @param {Array} $.data 数据
 */
HTMLTableElement.prototype.init = function ($) {
    let table = this
    table.innerHTML = "" //清空
    //创建头
    let thead = document.createElement("thead")
    $.data[0].forEach(e => {
        const th = document.createElement("th")
        th.innerText = e
        thead.appendChild(th)
    })
    table.appendChild(thead)
    //创建身体
    let tbody = document.createElement("tbody")
    $.data[1].forEach(e => {
        let tr = document.createElement("tr")
        e.forEach(e => {
            let td = document.createElement("td")
            td.innerText = e
            tr.appendChild(td)
        })
        tbody.appendChild(tr)
    })
    table.appendChild(tbody)
}


var alerts = new walert();
alerts.create({
    ele: 'table',
    title: "提示",
    content: "这是一个弹窗",
    confirm: {
        text: "确定",
        click: function (e) {
            console.log("点击了确定按钮");
        }
    },
    cancel: {
        text: "取消",
        click: function (e) {
            console.log("点击了取消按钮");
            UTIL.Alert.cancel();
        }
    }
}).show()

const tlb = document.querySelector("#table")
tlb.init({
    data: [
        ["姓名", "年龄", "性别"],
        [
            ["张三", 18, "男"],
            ["李四", 20, "女"],
            ["王五", 22, "男"]
        ]
    ]
})